• 今天要介紹的，與throttleTime算是兄弟檔，不過，一個瞻前，一個顧後，瞻前的我們在day23-throttleTime有說明，我們今個兒來談談這位顧後的守門員~ 'auditTime'。☕

auditTime

圖片來源-RxJS官網:auditTime

• 從彈珠圖我們可知，當事件觸發時，auditTime會執行一段觀察期，我們稱之為duration time或silence time(與throttleTime概念一致)，這段期間，如果observable持續更新，我會抓最新的一個。

case1: clickEvent & auditTime

• 我們從昨天sampleTime case2範例做個修改，將sampleTime改為auditTime，同時建置另一個讀秒系統，來觀看結果。
• 這個讀秒系統使用switchMap來撰寫，我們之後會介紹它！先初步理解它的功用:

點擊後啟動3秒的取樣
每秒印出 .
第三秒代表auditTime執行取樣，顯示 --- 3s

stackblitz

import {
  fromEvent,
  map,
  sampleTime,
  auditTime,
  tap,
  interval,
  take,
  switchMap,
} from 'rxjs';

console.log('=== case1:click event + auditTime ===');

const clicks$ = fromEvent(document, 'click');
const result = clicks$.pipe(
  map((event: MouseEvent) => {
    return { x: event.clientX, y: event.clientY };
  }),
  tap((d) => console.log(d)),
  auditTime(3000) //<-- 資料觸發後，設定3秒為區間，觀察並取得最新的資料
);

result.subscribe((d) => console.log('auditTime:', d));

// === 點擊後的讀秒系統:  ===
// 每秒印出.
// 第三秒代表auditTime執行取樣，顯示 --- 3s
const timer$ = interval(1000).pipe(
  take(3),
  map((d) => d + 1),
  tap((d) => {
    const msg = d % 3 === 0 ? '--- 3s' : '.';
    console.log(msg);
  })
);
clicks$.pipe(switchMap(() => timer$)).subscribe();

解析

• 一開始沒點擊，故沒有觸發auditTime取樣。
• 第一個點擊開始，讀秒也開始，時間內觀察最新的一筆資料，時間到後送出
  

✍Recap

• auditTime: 當事件或資料來時，觸發auditTime，這段觀察期間，抓取最新的資料，傳送給訂閱者(subscriber)。
• throttleTime:抓取第一筆資料(瞻前)
• auditTime:抓取最新的一筆資料(顧後)

時間類做個總結

• 注意到，除了sampleTime是透過內部的定時觸發取樣(Trigged Periodically)；其他的都是資料或事件來時觸發。

• Wow...這幾天我一口氣介紹了四種關於時間的用法，坦白說花了不少時間去理解他，相對地更清晰明瞭~ 值得!分享我今天學到的一句話:
  “We need to do a better job of putting ourselves higher on our own 'to do' list,” Mrs. Obama

• 剩下5天~衝阿~夥伴們！